<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>商城列表</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1526268_1oqcqy9v5lg.css">
    <link rel="stylesheet" href="../css/mall.css">
</head>
<body>
<!--头部搜索栏-->
<header flex="main:justify cross:center">
    <div flex="cross:center">
        <i class="iconfont iconsousuo"></i>
        <input type="text" placeholder="搜索商家，店铺，品牌名。">
    </div>
    <span>搜索</span>
</header>
<!--导航-->
<nav flex="cross:center main:justify">
    <div class="content" flex="dir:top cross:center">
        <img src="../img/1.png">
        <h3>家用电器</h3>
    </div>

    <div class="content" flex="dir:top cross:center">
        <img src="../img/2.png">
        <h3>手机数码</h3>
    </div>

    <div class="content" flex="dir:top cross:center">
        <img src="../img/3.png">
        <h3>电脑办公</h3>
    </div>

    <div class="content" flex="dir:top cross:center">
        <img src="../img/4.png">
        <h3>家具家纺</h3>
    </div>

    <div class="content" flex="dir:top cross:center">
        <img src="../img/1.png">
        <h3>家具家纺</h3>
    </div>
</nav>
<!--筛选项-->
<section>
    <div class="content1"></div>
    <ul class="content2" flex="main:justify cross:center">
        <li>
            <span id="ys">综合排序</span>
            <img src="../img/a.png">
        </li>

        <li class="xt"></li>
        <li>附近商家</li>
        <li class="xt"></li>
        <li>选择地区</li>
    </ul>
</section>
<!--列表项-->
<section>
    <!--第一层-->
    <div flex="cross:center dir:top">
        <div class="ys" flex="main:justify cross:center">
            <span>福州VANS专卖店</span>
            <i class="iconfont iconqianwang"></i>
        </div>

        <div class="ys1" flex="cross:center">
            <img src="../img/5.jpg">

            <div>
                <h5>福建省福州市鼓楼区鼓山旁福马路君临东城沃尔玛4楼</h5>

                <div>
                    <span>距离670m</span>
                    <span class="two">关注人数103</span>
                    <button>未关注</button>
                </div>
            </div>
        </div>
    </div>
    <!--第二层-->
    <div class="ys2" flex="cross:center dir:top">
        <div class="ys" flex="main:justify cross:center">
            <span>福州潮人服饰</span>
            <i class="iconfont iconqianwang"></i>
        </div>

        <div class="ys1" flex="cross:center">
            <img src="../img/6.jpg">

            <div>
                <h5>福建省福州市仓山区六一南路汇达广场旁服装城103号</h5>

                <div class="ys3">
                    <span>距离670m</span>
                    <span class="two">关注人数103</span>
                    <button>已关注</button>
                </div>
            </div>
        </div>
    </div>
    <!--第三层-->
    <div class="ys4" flex="cross:center dir:top">
        <div class="ys" flex="main:justify cross:center">
            <span>福州VANS专卖店</span>
            <i class="iconfont iconqianwang"></i>
        </div>

        <div class="ys1" flex="cross:center">
            <img src="../img/7.jpg">

            <div>
                <h5>福建省福州市鼓楼区鼓山旁福马路君临东城沃尔玛4楼</h5>

                <div>
                    <span>距离670m</span>
                    <span class="two">关注人数103</span>
                    <button>已关注</button>
                </div>
            </div>
        </div>
    </div>
    <!--第四层-->
    <div class="ys4" flex="cross:center dir:top">
        <div class="ys" flex="main:justify cross:center">
            <span>福州VANS专卖店</span>
            <i class="iconfont iconqianwang"></i>
        </div>

        <div class="ys1" flex="cross:center">
            <img src="../img/5.jpg">

            <div>
                <h5>福建省福州市鼓楼区鼓山旁福马路君临东城沃尔玛4楼</h5>

                <div>
                    <span>距离670m</span>
                    <span class="two">关注人数103</span>
                    <button>已关注</button>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>